<template>
	<!-- 上传图片 -->
	<view class="up-img-cont">
		<!-- 图片类型tab -->
		<view class="pd20" style="border-bottom: 1rpx solid #f0f0f0;">
			<imgTypeTab ref="imgTypeTab" :imgTypeList="imgTypeList" @tabSelect="tabSelect"></imgTypeTab>
		</view>
		<!-- 图片类型tab -->

		<!-- 类型标题 -->
		<view class="header-title mt-3 d-flex a-center j-sb pd20">
			<view class="type-title font-40">
				上传{{currentImgs.name}}
			</view>
			<view class="back" @tap="tapBack">
				返回
			</view>
		</view>
		<!-- 类型标题 -->

		<!-- 图片标签类型 -->
		<view class="img-tab-type pd20 " v-if="currentImgs.img_tab_typeList">
			<view class="mt-4" style="color: #a7a5be;">
				{{currentImgs.name}}标签（选填）
			</view>
			<view class="img-tab-list mt-2">
				<view class="img-tab-item" :class="imgTabTypeIndex == index?'active':''" @tap="tabCutImgTab(item,index)"
					v-for="(item,index) in currentImgs.img_tab_typeList" :key="index">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 图片标签类型 -->

		<!-- 上传类型 -->
		<view class="header-title mt-3 mb-2 d-flex a-center j-sb pd20">
			<view class="type-title " style="color: #9695bb;">
				上传{{currentImgs.name}}
			</view>
			<view @tap="showModal" style="color: #ff96a9;" v-if="currentImgs.up_explain">
				上传说明
			</view>
		</view>
		<view class="pd20">
			是否开启置顶：<switch color="#0841ff"  :checked="checked" @change="switch1Change" />
		</view>
		
		<view class="pd20">
			<view v-if="currentImgs.name == '头像' || currentImgs.name == '表情包' ">
				<upWorksList @upImg="upImg" ref="upWorksList" :currentImgs="currentImgs" :itemStyle="{
					width: '30%',
					height: '200rpx'
				}"></upWorksList>

			</view>
			<view v-if="currentImgs.name == '动态壁纸' || currentImgs.name == '壁纸' ">
				<upWorksList @upImg="upImg" ref="upWorksList" :currentImgs="currentImgs" :itemStyle="{
					'width':'33.33%',
					'height':'350rpx',
				}"></upWorksList>
			</view>

			<view v-if="currentImgs.name == '背景图' ">
				<upWorksList @upImg="upImg" ref="upWorksList" :currentImgs="currentImgs" :itemStyle="{
					width:'50%',
					'height':'200rpx',
				}"></upWorksList>
			</view>
		</view>



		<!-- 上传类型 -->


		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar  justify-end">
					<view class="content">声明</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="text-align: left;">
					{{currentImgs.up_explain}}
				</view>
				<view class="cu-bar bg-white">
					<view class="action margin-0 flex-sub  solid-left" style="color: #fe7065;" @tap="hideModal">我知道了
					</view>
				</view>
			</view>
		</view>


		<view class="bottom-btn-up-box" @tap="tapUpimgAffirm">
			<view class="bottom-btn-text">
				确认上传
			</view>
		</view>


	</view>
</template>

<script>
	import imgTypeTab from "@/components/common/img-type-tab.vue"
	import upWorksList from "@/components/common/up-works-list.vue"
	export default {
		components: {
			imgTypeTab,
			upWorksList
		},
		data() {
			return {
				checked:false,
				upIndex: 0,
				upImgsList: [

				],
				modalName: "",
				imgTabTypeIndex: -1,
				currentImgs: {},
				imgTypeList: [],
				framer_id: ''
			}
		},
		onLoad(e) {
			this.framer_id = e.framer_id
			this.framer_name = e.framer_name
			this.getImgTypeList()
		},
		methods: {
			switch1Change: function (e) {
				this.checked = e.detail.value
			            // console.log('switch1 发生 change 事件，携带值为', )
			 },
			upImg(imgs) {
				this.upImgsList = imgs
			},
			dateFormat(fmt, date) {
				let ret
				const opt = {
					"Y+": date.getFullYear().toString(), // 年
					"m+": (date.getMonth() + 1).toString(), // 月
					"d+": date.getDate().toString(), // 日
					"H+": date.getHours().toString(), // 时
					"M+": date.getMinutes().toString(), // 分
					"S+": date.getSeconds().toString(), // 秒
				}
				for (let k in opt) {
					ret = new RegExp("(" + k + ")").exec(fmt)
					if (ret) {
						fmt = fmt.replace(
							ret[1],
							ret[1].length === 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
						)
					}
				}
				return fmt
			},
			// 确认上传
			async tapUpimgAffirm() {
				if(this.upImgsList.length == 0){
					uni.showToast({
						title: "请上传图片",
						icon:"none"
					})
					return
				}
				var userInfo = uni.getStorageSync('user') || {}
				if (!this.upImgsList[this.upIndex]) {
					uni.showToast({
						title: "待审核，请耐心等待",
						icon:"none"
					})
					setTimeout(() => {
						uni.navigateBack({
				
						})
					}, 500)
					return
				}
				var data = await this.$api.addData({
					dbName: "wx_imgs",
					dataJson: {
						img_type: this.currentImgs.type,
						src: this.upImgsList[this.upIndex],
						download: 0,
						framer_id: this.framer_id,
						user_id: userInfo.openid || '',
						status: 2,
						is_top: this.checked?1:0,
						user_name: userInfo.nickname || '暂无',
						framer_name: this.framer_name,
						is_rd:0,
						time:new Date().getTime()
					}
				},true)
			
				this.upIndex++
				this.tapUpimgAffirm()
				// if (data.success) {
				// 	uni.showToast({
				// 		title: "创建成功"
				// 	})
				// 	this.getFramer()
				// 	setTimeout(() => {
				// 		this.hideModal()
				// 	}, 500)
				// }
			},
		
			// 获取图片类型列表
			async getImgTypeList() {
				var data = await this.$api.getData({
					dbName: "wx_img_type",
					sortRule: [
						{
							"name": "index",
							"type": "asc"
						}
					]
				})
				this.imgTypeList = data.rows
				console.log(this.imgTypeList,'1111111122222222')
				this.init()
			},
			init() {
				
				if (this.imgTypeList[0]) {
					this.currentImgs = this.imgTypeList[this.$refs['imgTypeTab'].TabCur]
				}
			},
			showModal(e) {
				this.modalName = "Modal"
			},
			hideModal(e) {
				this.modalName = null
			},
			tabCutImgTab(item, index) {
				if (this.imgTabTypeIndex == index) {
					this.imgTabTypeIndex = -1
					return
				}
				this.imgTabTypeIndex = index
			},
		
			tabSelect(item, index) {
				this.currentImgs = item
				setTimeout(() => {
					this.$refs['upWorksList'].upImgList = []
				
				})
			},
			tapBack() {
				uni.navigateBack({

				})
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.bottom-btn-up-box {
		width: 100%;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;

		.bottom-btn-text {
			border-radius: 10rpx;
			width: 100%;
			height: 80rpx;
			background: #ff6d59;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.img-tab-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.img-tab-item {
			padding: 10rpx 30rpx;
			background: #f8f7f7;
			border-radius: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.active {
			background: #ffede5;
			border: 1rpx solid #ff6d59;
			color: #ff81aa;
		}
	}

	.header-title {
		.back {
			padding: 10rpx 20rpx;
			background: #ecebeb;
			border-radius: 10rpx;
		}
	}

	.up-img-cont {}
</style>
